<template>
    <div>
      <h1>房号修改</h1>
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td align="right">房型名称</td>
            <td>
              <select v-model="query.typeName">
                <option value="">请选择</option>
                <option :value="item.typeName"  v-for="item in list">{{ item.typeName }}</option>
              </select>
            </td>
          </tr>
          <tr>
            <td align="right">房号</td>
            <td>
              <input type="text" v-model="query.hoomNumber"/>
            </td>
          </tr>
          <tr>
            <td align="right">备注</td>
            <td>
              <textarea v-model="query.desc"></textarea>
            </td>
          </tr>
          <tr>
            <td align="right">状态</td>
            <td>
              <input type="radio" name="states" :value="0" v-model="query.state"/>上架
              <input type="radio" name="states" :value="1" v-model="query.state"/>下架
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <input type="button" value="修改" class="btn btn-primary" @click="ok"/>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,reactive,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const router=useRouter();
const route=useRoute();

let query:any=reactive
({
    "numberId": route.query.id,
    "typeName": "",
    "hoomNumber": "",
    "desc": "",
    "state": ""
})

onMounted(()=>{
    shoetype();
    Fan();
})

let list:any=ref([])

const shoetype=()=>
{
    axios
    ({
        url:'/api/Type/AllType',
        method:'get'
    })
    .then(res=>{
        list.value=res.data;
    })
    .catch(err=>{

    })
}
//房号反填
const Fan=()=>
{
    axios
    ({
        url:'/api/Number/NumberFan',
        method:'get',
        params:
        {
            id:route.query.id
        }
    })
    .then(res=>{
        Object.assign(query,res.data);
    })
    .catch(err=>{

    })
}
//修改
const ok=()=>
{
  if(query.typeName=="")
  {
    alert("房型名称不能为空");
    return;
  }
  if(query.hoomNumber=="")
  {
    alert("房号不能为空");
    return;
  }
  if(query.desc=="")
  {
    alert("备注不能为空");
    return;
  }
  axios
  ({
    url:'/api/Number/NumberUpdate',
    method:'put',
    data:query
  })
  .then(res=>{
    if(res.data==-1)
    {
      alert("房号重复");
      return;
    }
    if(res.data>0)
    {
      alert("修改成功");
      router.push('/numberList');
      return;
    }
    else
    {
      alert("修改失败");
      return;
    }
  })
  .catch(err=>{

  })
}


</script>

<style scoped>

</style>